Android UI

Posts tagged with Android UI

A warm off-white content plane extends between violet status and navigation boundaries, with a teal protected action floating safely above the lower edge on deep navy.

Edge-to-Edge UI in Jetpack Compose

Make Compose screens edge-to-edge safely with enableEdgeToEdge, an explicit inset owner, Scaffold content padding, keyboard handling, and Android 15 testing.

A dark technical illustration of a UI card surrounded by ordered, translucent layers for tap target, padding, clipping, and content.

Why Modifier Order Matters in Jetpack Compose

See how Jetpack Compose Modifier order changes touch targets, backgrounds, clipping, and size constraints with practical before-and-after examples.

A dark mobile UI illustration showing a top app bar, bottom navigation, floating action button, and highlighted safe areas around a phone screen.

Scaffold and Window Insets in Jetpack Compose

Build edge-to-edge Compose screens with Scaffold, apply innerPadding correctly, and avoid status bar, navigation bar, and keyboard overlap.

An abstract dark interface diagram showing horizontal, vertical, and overlapping card layouts for Jetpack Compose.

Row vs Column vs Box in Jetpack Compose

Learn when to use Row, Column, and Box in Jetpack Compose, including alignment, arrangement, weight, and overlay patterns with practical examples.

A dark technical illustration of an Android layout with expanding width, centered content, proportional weighted columns, and a fixed square inside a constraint frame.

fillMaxWidth, wrapContentSize, weight, and size in Jetpack Compose

Learn how fillMaxWidth, wrapContentSize, weight, and size respond to parent constraints in Jetpack Compose with practical layout examples.

A dark technical illustration of an Android screen receiving a UI tree, geometric layout grid, and glowing drawing layer to represent the three Compose UI phases.

Jetpack Compose UI Phases: Composition, Layout, and Drawing

Understand Jetpack Compose composition, layout, and drawing phases, how state reads restart work, and how to diagnose real UI performance problems.

A dark technical illustration of an Android layout showing evenly spaced horizontal cards, centered vertical cards, and an overlaid corner-aligned element.

Arrangement and Alignment in Jetpack Compose

Learn how Arrangement and Alignment position children in Row, Column, and Box, with practical Compose examples for spacing, centering, and overlays.

A central violet transition hub sends synchronized teal paths to a warm off-white card, a circular shape, and a small coral accent.

updateTransition: Animate Multiple Values Together

Coordinate color, size, shape, and other state-driven values in Jetpack Compose with updateTransition and state-pair-specific animation specs.

A violet control hub smoothly moves a teal slider toward a warm off-white target card, with a small coral endpoint marker.

animate*AsState: Animate Values in Jetpack Compose

Animate a single Float, Color, Dp, or other value from Compose state with animate*AsState, deliberate specs, and clear guidance on when to use another API.

A warm off-white content card rises through a translucent violet frame with teal entry trails and a small coral exit marker.

AnimatedVisibility in Jetpack Compose

Show and remove Compose content with AnimatedVisibility, custom enter and exit transitions, child motion, and reliable lifecycle-aware patterns.

Two warm off-white content cards overlap inside a violet frame, with a teal incoming path and a small coral outgoing path.

AnimatedContent vs Crossfade in Compose

Choose Crossfade for a simple content swap and AnimatedContent for directional, size-aware, or state-pair-specific transitions in Jetpack Compose.

Jetpack Compose FlexBox layout wrapping on a phone and reflowing on a tablet side by side, with main axis and cross axis labels

Jetpack Compose FlexBox: Complete Guide With Examples

Learn how to use Jetpack Compose FlexBox to build adaptive, wrapping layouts for phones, tablets & foldables — with real code examples.